<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签到</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/common.js"></script>
</head>
<body>
<img src="image/bg.png" alt="" class="bg">
<div class="welcomeSomebody" id="welcomeSomebody">
    <marquee behavior="scroll" direction="left" class="marquee" scrollamount=30 id="marquee"></marquee>
</div>
<div class="choose signButton" onclick="window.location.href='lottery.html'">点击抽奖</div>
<div class="container" id="container"></div>
<img src="" alt="" style="visibility: hidden" id="hideImg">
</body>
<script>
    // var show = setInterval(function () {
    //     i++;
    //     distanceX = Math.floor(Math.random() * 1440);
    //     distanceY = Math.floor(Math.random() * 515);
    //     hx = Math.floor(Math.random() * 60) + 30;
    //     time = Math.floor(Math.random() * 10) + 3;
    //
    //     $("#container").append('<img src="img/' + (i % 20 + 1) + '.jpg" class="circle" style="animation:name' + hx + ' ' + time + 's ease-in-out infinite;width:' + hx + 'px;height:' + hx + 'px;top: ' + distanceY + 'px;left:' + distanceX + 'px;z-index:' + (i + 2) + ';">');
    //     rule.insertRule("@keyframes name" + hx + "{ " + (hx - 20) + "%{transform: translate(0," + hx + "%) scale(1.3);} 100%{transform: translate(0,0) scale(1);}}");
    //     $("#marquee").html("欢迎XXX入场！");
    // }, 3000)
    $(document).ready(function () {
        oldUser();
        var addnew = setInterval(pollUser(), 3000);
    })
    var distanceX, distanceY, hx, rule = document.styleSheets[0], time, i = 0;
    function oldUser() {
        var url = basePath + "/wechat/getUserList";
        $.ajax({
            url: url,
            type: 'post',
            data: {},
            dataType: 'json',
            success: function (ajaxData) {
                if (ajaxData.code != 1) { //todo code=1 成功
                    alert(ajaxData.msg);
                } else {
                    var data = ajaxData.data;
                    if (data.length > 0) {
                        for (var i = 0; i<data.length; i++) {
                            var userName = data[i].name;
                            var src = data[i].wxImage;
                            addUser(src, userName);
                        }
                    }
                }
            }, error: function (ajaxData) {
                alert(ajaxData.msg);
            }
        });
    }
    function pollUser() {
        var url = basePath + "/wechat/pollUser";
        $.ajax({
            url: url,
            type: 'post',
            data: {},
            dataType: 'json',
            success: function (ajaxData) {
                if (ajaxData.code != 1) { //todo code=1 成功
                    alert(ajaxData.msg);
                } else {
                    var data = ajaxData.data;
                    if (data.length > 0) {
                        var userName = data.name;
                        var src = data.wxImage;
                        addUser(src, userName);
                    }
                }
            }, error: function (ajaxData) {
                alert(ajaxData.msg);
            }
        });
    }
    function addUser(src, name) {
        $("#hideImg").attr("src",src);
        i++;
        distanceX = Math.floor(Math.random() * 1490);
        distanceY = Math.floor(Math.random() * 570);
        hx = Math.floor(Math.random() * 60) + 30;
        time = Math.floor(Math.random() * 10) + 3;
        $("#container").append('<img src=' + src + ' class="circle" style="animation:name' + hx + ' ' + time + 's ease-in-out infinite;width:' + hx + 'px;height:' + hx + 'px;top: ' + distanceY + 'px;left:' + distanceX + 'px;z-index:' + (i + 2) + ';">');
        rule.insertRule("@keyframes name" + hx + "{ " + (hx - 20) + "%{transform: translate(0," + hx + "%) scale(1.3);} 100%{transform: translate(0,0) scale(1);}}");
        $("#marquee").html("欢迎" + name + "入场！");

    }
</script>
</html>